<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getTableList">
      <template #status="scope">
        <el-tag type="primary">
          {{ filterEnum(scope.row.status, flexJobStatusType) }}
        </el-tag>
      </template>
      <template #flagCompany="scope">
        <el-tag :type="scope.row.flagCompany === flagEnum.FLAG_TRUE ? 'primary' : 'success'">
          {{ scope.row.flagCompany === flagEnum.FLAG_TRUE ? "企业" : "个人" }}
        </el-tag>
      </template>
      <template #cityName="scope">
        <div class="address-box">
          <el-space :spacer="spacer">
            <span class="address-item">{{ scope.row.cityName || "--" }}</span>
            <span class="address-item">{{ scope.row.areaName || "--" }}</span>
          </el-space>
        </div>
      </template>
      <template #priceAmt="scope">
        <div class="price-box">
          <el-space :spacer="spacer">
            <span class="price-item">{{ scope.row.priceAmt || "--" }}</span>
            <el-tag type="primary" size="small" v-if="scope.row.flagTalk === 'Y'">可议价</el-tag>
          </el-space>
        </div>
      </template>
      <template #dealAmt="scope">
        <span class="price-item">{{ scope.row.dealAmt || "--" }}</span>
      </template>
      <template #operation="scope">
        <el-button type="primary" :icon="Edit" size="small" text @click="handleOpenAbnormalDialog(OptEnum.EDIT, scope.row)">
          售后详情
        </el-button>
        <el-button type="primary" :icon="View" size="small" text @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          岗位详情
        </el-button>
      </template>
    </ProTable>
    <JobDialog ref="dialogRef" @refresh-list="handleRefreshList" />
    <AbnormalDialog ref="abnormalDialogRef" />
  </div>
</template>
<script setup lang="ts">
import { h, ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { View, Edit } from "@element-plus/icons-vue";
import { getAbnormalFlexjobsVoListApi } from "@/api/modules/cpyjob/flexjob";
import { ColumnProps } from "@/components/ProTable/interface";
import { OptEnum, flagEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { flexJobStatusType } from "@/biz/datas/jobData";
import JobDialog from "../comm/job/JobDialog.vue";
import AbnormalDialog from "./components/AbnormalDialog.vue";
// import { useHandleData } from "@/hooks/useHandleData";
import { ElDivider } from "element-plus";

const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});
const spacer = h(ElDivider, { direction: "vertical" });

// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  // 这边可以处理一下参数
  // let newParams = JSON.parse(JSON.stringify(params));
  // newParams.createDate && (newParams.startDate = newParams.createDate[0]);
  // newParams.createDate && (newParams.endDate = newParams.createDate[1]);
  // delete newParams.createDate;
  return getAbnormalFlexjobsVoListApi(params) || [];
};
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 60, fixed: "left" },
  //   { type: "index", label: "#", width: 60 },
  {
    prop: "title",
    label: "标题",
    search: { el: "input" }
  },
  {
    prop: "flagCompany",
    label: "企业/个人",
    width: 100
  },
  {
    prop: "cityName",
    label: "地址"
  },
  {
    prop: "status",
    label: "状态",
    width: 100
  },
  {
    prop: "priceAmt",
    label: "岗位费用"
  },
  {
    prop: "dealAmt",
    label: "成交费用"
  },
  {
    prop: "abnormalDate",
    label: "售后时间" 
  },
  {
    prop: "operation",
    width: 260,
    fixed: "right",
    label: "操作"
  }
];

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

// // 删除信息
// const handleDeleteItem = async (params: any) => {
//   await useHandleData(offlineFlexjobApi, { id: params.id! }, `确认下架【${params.title}】`);
//   pTable.value.getTableList();
// };

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  // console.log("开票弹窗", params);
  dialogRef.value.acceptParams(params);
};

// 打开 dialog(新增、查看、编辑)
const abnormalDialogRef = ref();
const handleOpenAbnormalDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  // console.log("开票弹窗", params);
  abnormalDialogRef.value.acceptParams(params);
};
</script>
<style scoped lang="scss">
.address-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .address-item {
    font-size: 0.8rem;
    color: var(--el-color-info);
    font-weight: 400;
  }
}
</style>
